<template>
    <div>
        <div class="content">
            <div class="goapp">
                <img class="logo" src="https://p1.meituan.net/travelcube/7264ce9c25de2e464e3acd996fe8ad362803.png">
                <p>
                    <span class="content-title">省钱利器 购物超划算</span><br>
                    <span class="content-edp">吃喝玩乐尽在美团</span>
                </p>
                <button class="go-btn">去APP</button>
            </div>
            <div class="fenlei">
                <ul>
                    <li>
                        <img class="fenlei_img"
                        src="https://p0.meituan.net/imeituanbusiness/4579713360f6b07c482d475606dcdaf32232.png">
                        <br><span>美食</span>
                    </li>
                    <li>
                        <img class="fenlei_img"
                            src="https://p0.meituan.net/imeituanbusiness/36ea5f8aa1429104ef51c9e03fe212a54183.png">
                        <br><span>猫眼电影</span>
                    </li>
                    <li>
                        <img class="fenlei_img"
                            src="https://p0.meituan.net/imeituanbusiness/ea0c6fab93f5070dfc7baa50ac9052a02300.png">
                        <br><span>酒店</span>
                    </li>
                    <li>
                        <img class="fenlei_img"
                            src="https://p0.meituan.net/imeituanbusiness/7b30434d02d20c4e0428cbc2091499f22631.png">
                        <br><span>休闲娱乐</span>
                    </li>
                    <li>
                        <img class="fenlei_img"
                            src="https://p0.meituan.net/imeituanbusiness/f8fc99f79983d96a12889d00ad4df41a2868.png">
                        <br><span>外卖</span>
                    </li>
                    <li>
                        <img class="fenlei_img"
                            src="https://p0.meituan.net/imeituanbusiness/982e9a55410baae204a220840b11cc952772.png">
                        <br><span>KTV</span>
                    </li>
                    <li>
                        <img class="fenlei_img"
                            src="https://p0.meituan.net/imeituanbusiness/586d25e7f9615a91b831713c5b68fdd62345.png">
                        <br><span>周边游</span>
                    </li>
                    <li>
                        <img class="fenlei_img"
                            src="https://p0.meituan.net/imeituanbusiness/862a8ecbcaec80cc827090074c358f882565.png">
                        <br><span>丽人</span>
                    </li>
                    <li>
                        <img class="fenlei_img"
                            src="https://p0.meituan.net/imeituanbusiness/51b317553ac233d10e00e22c3b198aac2906.png">
                        <br><span>母婴亲子</span>
                    </li>
                    <li>
                        <img class="fenlei_img"
                            src="https://p0.meituan.net/imeituanbusiness/ad793f3d4b6625b60a9aeb64688739952061.png">
                        <br><span>全部分类</span>
                    </li>
                </ul>
            </div>

        </div>
    </div>
</template>

<script>

</script>

<style lang="less" scoped>
.content {
    width: 100%;
    height: 250px;
    background-color: #F6F7FA;


    .goapp {
        height: 52px;
        width: 100%;
        background-color: black;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .logo {
            width: 35px;
            margin-left: 10px;
        }

        .go-btn {
            border: none;
            background: #ffbd00;
            width: 52px;
            height: 30px;
            font-size: 12px;
            border-radius: 10px;
            margin-right: 10px;
        }

        p {
            margin-left: -80px;

            span {
                color: white;
            }

            .content-title {
                font-size: 15px;
                font-weight: 600;

            }

            .content-edp {
                font-size: 13px;
            }
        }


    }

    .fenlei {
        height: 168px;
        width: 100%;
        background-color: #FFFFFF;
        ul {
            list-style: none;
            overflow: hidden;
            position: relative;
            right: 15px;

            li {
                margin-top: 10px;
                float: left;
                text-align: center;
                margin-right: 20px;

                .fenlei_img {
                    width: 40px;
                }

                span {
                    font-size: 10px;
                }
            }
        }
    }
}
</style>